<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>按钮选择</title>
  <style>
      ul{margin:0;padding:0;display:inline-block;border:1px solid #ccc;line-height:40px;border-radius:5px;height:40px;vertical-align:middle}
      li{list-style:none;float:left}
      ul li:not(:first-child){border-left:1px solid #ccc}
      label{display:inline-block;width:100%;height:100%}
      input{display:none}
      span{display:inline-block;height:100%;color:#333;padding:0 20px;}
      input[type=radio]:checked + span,input[type=checkbox]:checked + span{background-color:dodgerblue;color:#f8f8f8;}
  </style>
</head>
<body>
    <form action="javascript:;" id="form">
    我申请的职位：
    <ul>
        <li><label><input type="radio" name="reply" value="php"><span>php</span></label></li>
        <li><label><input type="radio" name="reply" value="前端"><span>前端</span></label></li>
        <li><label><input type="radio" name="reply" value="UI"><span>UI</span></label></li>
        <li><label><input type="radio" name="reply" value="人事"><span>人事</span></label></li>
        <li><label><input type="radio" name="reply" value="销售"><span>销售</span></label></li>
    </ul>
    
    <br><br>

    我掌握的技术：
    <ul>
        <li><label><input type="checkbox" name="get[]" value="php"><span>php</span></label></li>
        <li><label><input type="checkbox" name="get[]" value="javascript"><span>javascript</span></label></li>
        <li><label><input type="checkbox" name="get[]" value="css"><span>css</span></label></li>
        <li><label><input type="checkbox" name="get[]" value="html"><span>html</span></label></li>
        <li><label><input type="checkbox" name="get[]" value="nodejs"><span>nodejs</span></label></li>
    </ul>
    <p><button>点击提交</button></p>
    </form>

    
    <script type="text/javascript">
        document.getElementById('form').onsubmit = function(e) {
            e.preventDefault();
            var form = document.getElementById('form');
            var elements = form.elements;
            var reply = elements['reply'];
            var gets = elements['get[]'];
            var get = [];
            for(var i = 0; i < gets.length; i++) {
                if(gets[i].checked) get.push(gets[i].value)
            }
            get = get.join(',');
            alert('我申请的职位是'+ reply.value +'，我掌握的技术是'+ get);
        }

    </script>

</body>
</html>